<template>
  <div class="message-center">
    <Card>
      <Row :gutter="26">
        <i-col span="6">
          <div class="message-title">
            <div :class="current=='messageSys' ? 'choose' : ''" @click="goToMessageCenter('messageSys')">
              系统通知
              <Badge :count="messageSys"></Badge>
            </div>
            <div
              :class="current=='messageMeet' ? 'choose' : ''"
              @click="goToMessageCenter('messageMeet')"
            >
              会议通知
              <Badge :count="messageMeet"></Badge>
            </div>
            <!-- <div :class="current=='messageEdu' ? 'choose' : ''" @click="goToMessageCenter('messageEdu')">
              培训通知
              <Badge :count="messageEdu"></Badge>
            </div> -->
            <div
              :class="current=='messageCheck' ? 'choose' : ''"
              @click="goToMessageCenter('messageCheck')"
            >
              审批通知
              <Badge :count="messageCheck"></Badge>
            </div>
            <!-- <div
              :class="current=='messageEval' ? 'choose' : ''"
              @click="goToMessageCenter('messageEval')"
            >
              领导评价
              <Badge :count="messageEval"></Badge>
            </div> -->
            <!-- <div
              :class="current=='messageHander' ? 'choose' : ''"
              @click="goToMessageCenter('messageHander')"
            >
              交办件通知
              <Badge :count="messageHander"></Badge>
            </div> -->
            <div
              :class="current=='messageDaily' ? 'choose' : ''"
              @click="goToMessageCenter('messageDaily')"
            >
              日志评价
              <Badge :count="messageDaily"></Badge>
            </div>
            <!-- <div :class="current=='messageKnow' ? 'choose' : ''" @click="queryMessage('messageKnow')">审批知识库<Badge :count="messageKnow"></Badge></div> -->
          </div>
        </i-col>
        <i-col span="18">
          <div class="message-list">
            <div class="choose right pb10 point" @click="hadRead()">全部标记为已读</div>

            <div>
              <mess-sys
                v-if="current=='messageSys'"
                :messageSysList="messageSysList"
                :total="totalList"
                :pagSize="pagSize"
                @pageChange="queryMessage"
              />
              <mess-meet
                v-if="current=='messageMeet'"
                :messageMeetList="messageMeetList"
                :total="totalList"
                :pagSize="pagSize"
              />
              <mess-edu
                v-if="current=='messageEdu'"
                :messageEduList="messageEduList"
                :total="totalList"
                :pagSize="pagSize"
                :currentPart = 'current'
              />
              <mess-check
                v-if="current=='messageCheck'"
                :messageCheckList="messageCheckList"
                :total="totalList"
                :pagSize="pagSize"
                :currentPart = 'current'
              />
              <mess-eval
                v-if="current=='messageEval'"
                :messageEvalList="messageEvalList"
                :total="totalList"
                :pagSize="pagSize"
              />

              <mess-hander
                v-if="current=='messageHander'"
                :messageHanderList="messageHanderList"
                :total="totalList"
                :pagSize="pagSize"
              />
              <mess-daily
                v-if="current=='messageDaily'"
                :messageDailyList="messageDailyList"
                :total="totalList"
                :pagSize="pagSize"
              />
            </div>
          </div>
        </i-col>
      </Row>
    </Card>
    <Card>
      <div class="contain" ref="mybox" style="height:1000px">
        <canvas id="myCanvas" width="200" height="100" ref="myCanvas"></canvas>
      </div>
    </Card>
  </div>
</template>
<script>
import messSys from "./components/messSys";
import messMeet from "./components/messMeet";
import messEdu from "./components/messEdu";
import messCheck from "./components/messCheck";
import messEval from "./components/messEval";
import messHander from "./components/messHander";
import messDaily from "./components/messDaily";
import { detail } from '@/api/drainageCode/seas';

export default {
  components: {
    messSys,
    messMeet,
    messEdu,
    messCheck,
    messEval,
    messHander,
    messDaily
  },
  data() {
    return {
      loginUser: "",
      loginTime: "",
      pageSize: 15,
      current: "",
      messageSys: 0,
      messageMeet: 0,
      messageEdu: 0,
      messageCheck: 0,
      messageEval: 0,
      messageHander: 0,
      messageDaily: 0,
      totalList: 20,
      messageSysList: [
        {
          message: "管理机构-国联人寿无锡分公司续收任务统计：7月份共计完成收费件76个，督导件50个，大额件0个。综合收费进度为55.71%。",
          datetime: "2023/07/31",
          title: "消息通知",
          btn: null,
          isread: "0",
          id: "1685810032699068418"
        }
      ],
      messageMeetList: [
        {
          isread: '0',
          theme: '失败是成功之母',
          meetingtype: '会议进行中',
          startdate: '2023-08-01 12:10:10',
          enddate: '2023-08-01 14:10:10',
          address: '三楼会议室B',
          filename: '会议通知.txt',
        },
        {
          isread: '0',
          theme: '磨砺',
          meetingtype: '会议已结束',
          startdate: '2023-08-01 12:10:10',
          enddate: '2023-08-01 14:10:10',
          address: '三楼会议室B',
          filename: '会议通知.txt',
        },
      ],
      messageEduList:[],
      messageCheckList: [
        {
          uid: '1',
          uidname: '张三',
          isread: 0,
          applyType: '请假',
          state: '已驳回',
          approvaName: '请假条',
          startTime: '2023-01-15',
          startTimeSolt: '09:00:00',
          endTime: '2023-01-15',
          endTimeSolt: '18:00:00',
          detail: '病假',
          reason: '感冒了',
          createTime: '2023-01-11 18:00:00'
        },
        {
          uid: '1',
          uidname: '张三',
          isread: 0,
          applyType: '外出',
          state: '审批中',
          approvaName: '外出条',
          startTime: '2023-02-10 05:10',
          endTime: '2023-02-10 10:10',
          detail: '事假',
          reason: '私事请假',
          createTime: '2023-02-01 18:00:00'
        },
        {
          uid: '1',
          uidname: '张三',
          isread: 0,
          applyType: '补卡',
          state: '已同意',
          approvaName: '补卡条',
          clockInDate: '2023-08-01',
          clockInTime: '10:15',
          clockOutDate: '2023-08-01',
          clockOutTime: '18:00',
          detail: '事假',
          reason: '私事请假',
          createTime: '2023-07-31 18:00:00'
        }
      ],
      messageEvalList:[],
      messageHanderList: [],
      messageDailyList: [
        {
          isread: 0,
          name: '李四',
          workday: '日报',
          worktype: '收展工作',
          stars: 5,
          detail: '你很不错，继续努力！',
        }
      ],
    };
  },
  methods: {
    // 切割字符串
    splitStr(sysStr) {
      if (sysStr.indexOf("【") != -1) {
        let infoArr = [];
        let sysArr1 = sysStr.split("【");
        infoArr.push(sysArr1[0]);
        sysArr1.forEach(item => {
          if (item.indexOf("】") != -1) {
            let sysArr2 = item.split("】");
            sysArr2.forEach(item1 => {
              infoArr.push(item1);
            });
          }
        });
        return infoArr;
      } else {
        let infoArr = [];
        infoArr.push(sysStr)
        return infoArr;
      }
    },
    //跳转
    goToMessageCenter(name){
      this.current = name
      // console.log(name)
      this.$router.push({
        path: 'messageCenter',
        query: {
          type: this.current
        }
      });
    },
    queryMessage(name) {
      this.current = name;
      console.log(this.current,name);
      //请求列表数据
      // switch(name){
      //   case 'messageSys':
      //     this.api.getListForSysmessage({
      //       queryFlag:'1'
      //     }).then(res => {
      //       if (res.code == 200) {
      //         let records = res.data.records;
      //         records.map(item => {
      //           item.message = this.splitStr(item.message);
      //         });
      //         // console.log(records)
      //         this.messageSysList = records;
      //         // this.sysTotal = res.data.total;
      //       }
      //     });
      //     break;
      //   case 'messageMeet':
      //     this.api.getListForMeeting({ index: 1, size: 500, queryFlag:'1' }).then(res => {
      //       let records2 = res.data.records;
      //       records2.map(item => {
      //         if (item.filename == null) {
      //           item.filename = "暂无附件";
      //         }
      //         if (item.startdate) {
      //           item["date"] = item.startdate.substr(0, 10);
      //           item["starttime"] = item.startdate.substr(10, 15);
      //           item["endtime"] = item.startdate.substr(10, 15);
      //         }
      //       });
      //       this.messageMeetList = records2;
      //       // this.meetTotal = res.data.total;
      //     });
      //     break;
      //   case 'messageEdu':
      //     this.api.getListForTrain({ index: 1, pageSize: 500, queryFlag:'1' }).then(res => {
      //       let records3 = res.data.records;
      //       console.log("records3",records3)
      //       records3.map(item => {
      //         if (item.filename == null) {
      //           item.filename = "暂无附件";
      //         }
      //       });
      //       this.messageEduList = records3;
      //       // this.trainTotal = res.data.total;
      //     });
      //     break;
      //   case 'messageCheck':
      //     this.api.getIndexApprova({ index: 1, pageSize: 500, queryFlag:'1' }).then(res => {
      //       if (res.code == 200 && res.data != null) {
      //         this.messageCheckList = res.data.records;
      //         this.messageCheckList.forEach(element => {
      //           if (element.reason) {
      //             if (element.reason.length > 30) {
      //               let temp = String(element.reason);
      //               element.reason = temp.substring(0, 30) + "...";
      //             }
      //           }
      //           if (element.place) {
      //             if (element.place.length > 6) {
      //               let temp = String(element.place);
      //               element.place = temp.substring(0, 6) + "...";
      //             }
      //           }
      //           if (element.clockInDate) {
      //             element.clockInDate = element.clockInDate.substring(0, 10);
      //           }
      //           if (element.clockOutDate) {
      //             element.clockOutDate = element.clockOutDate.substring(0, 10);
      //           }
      //           if (element.startTime) {
      //             element.startTime = element.startTime.substring(0, 10);
      //           }
      //           if (element.endTime) {
      //             element.endTime = element.endTime.substring(0, 10);
      //           }
      //         });
      //         // console.log(this.applicateList);
      //         // this.totalA = res.data.total;
      //       }
      //     });
      //     break;
      //   case 'messageEval':
      //     this.api.getIndexComment({ index: 1, pageSize: 500, queryFlag:'1' }).then(res => {
      //       if (res.code == 200 && res.data != null) {
      //         this.messageEvalList = res.data;
      //         this.messageEvalList.forEach(element => {
      //           if (element.comment) {
      //             if (element.comment.length > 30) {
      //               let temp = String(element.comment);
      //               element.comment = temp.substring(0, 30) + "...";
      //             }
      //           }
      //         });
      //         // this.totalC = this.indexComment.length;
      //       } else {
      //         this.messageEvalList = [];
      //         // this.totalC = 0;
      //       }
      //     });
      //     break;
      //   case 'messageHander':
      //     this.api.getListForHandOver({ index: 1, pageSize: 500, queryFlag:'1' }).then(res => {
      //       if (res.code == 200 && res.data != null) {
      //         this.messageHanderList = res.data.records;
      //         // this.messageHanderList.forEach(element => {
      //         //   if (element.comment) {
      //         //     if (element.comment.length > 30) {
      //         //       let temp = String(element.comment);
      //         //       element.comment = temp.substring(0, 30) + "...";
      //         //     }
      //         //   }
      //         // });
      //         // this.totalC = this.indexComment.length;
      //       } else {
      //         this.messageHanderList = [];
      //         // this.totalC = 0;
      //       }
      //     });
      //     break;
      //   case 'messageDaily':
      //     this.api.getListForWorkDiary({ index: 1, pageSize: 500, queryFlag:'1' }).then(res => {
      //       if (res.code == 200 && res.data != null) {
      //         this.messageDailyList = res.data.records;
      //         // this.messageDailyList.forEach(element => {
      //         //   if (element.comment) {
      //         //     if (element.comment.length > 30) {
      //         //       let temp = String(element.comment);
      //         //       element.comment = temp.substring(0, 30) + "...";
      //         //     }
      //         //   }
      //         // });
      //         // this.totalC = this.indexComment.length;
      //       } else {
      //         this.messageDailyList = [];
      //         // this.totalC = 0;
      //       }
      //     });
      //     break;
      // }
    },
    hadRead(){
      let arr = []
      let currentPart = this.current
      console.log(this.current + 'List')
      console.log(this[this.current + 'List'])
      if(this[this.current + 'List'].length==0){
        return;
      }
//       审批通知'api/ApplyVacate/indexApprova' 返回的applyno,
// 领导评价api/List/indexComment' 返回的id,
// 系统'api/indexshow/getListForSysmessage' 返回的id,
// 会议'api/indexshow/getListForMeeting' 返回的 meetSerialNo,
// 培训'api/indexshow/getListForTrain' 返回的trainid
      if(this.current=='messageCheck'){
        this[this.current + 'List'].map((item)=>{
          arr.push(item.applyNo)
        })
      }else if(this.current=='messageEdu') {
        this[this.current + 'List'].map((item)=>{
          arr.push(item.trainid)
        })
      }else if(this.current=='messageMeet'){
        this[this.current + 'List'].map((item)=>{
          arr.push(item.meetSerialNo)
        })
      }else if(this.current=='messageHander'){
        this[this.current + 'List'].map((item)=>{
          arr.push(item.planid)
        })
      }else{
        this[this.current + 'List'].map((item)=>{
          arr.push(item.id)
        })
      }
      let typeList = ['messageSys','messageMeet','messageEdu','messageCheck','messageEval','all','messageHander','messageDaily']
      console.log(typeList.indexOf(this.current))
      let type = typeList.indexOf(this.current) + 1 
      // this[this.current + 'List']
      let obj = {}
      if(this.current=='messageHander'){
        obj={
          type,
          contno:arr.join(',')
        }
      }else{
        obj={
          type,
          idList:arr.join(',')
        }
      }

      this.api.updateWorkDiaryReadNotice(obj).then(res => {
        console.log(res)
        this.queryMessage(this.current)
        this.$store.commit('messageHasChangedFreshedQuickly', this.current);
        this.messageCount();
      })
    },
    messageCount(){
      this.api.getNoticeCount({}).then( res => {
          if(res.code == 200){
            // this.$Notice.info({
            //   title: resNum.msg,
            //   desc: resNum.data,
            // });
            this.messageSys = res.data.sysCount
            this.messageMeet = res.data.meetCount
            this.messageEdu = res.data.trainCount
            this.messageCheck = res.data.approveCount
            this.messageEval = res.data.reviewCount
            this.messageHander = res.data.handovercount
            this.messageDaily = res.data.workdairycount

          }else{
            this.$Notice.info({
              title: res.msg,
              desc: res.data,
            });
          }
      })
    },
  },
  watch:{
    $route(){
      this.current = this.$route.query.type
      this.queryMessage(this.current)
    },
  },
  mounted() {
    //重置current
    this.messageCount()
    console.log("123",this.current,this.$route.query.type)
    this.current = this.$route.query.type
    this.queryMessage(this.current)

  }
};
</script>
<style lang="less">
.message-center {
  .tc{
    text-align: center;
  }
  .pb10 {
    padding-bottom: 10px;
  }
  .choose {
    color: #2d8cf0;
  }
  .point {
    cursor: pointer;
  }
  .right {
    text-align: right;
  }
  .message-title {
    div {
      height: 48px;
      border-top: 1px solid #efefef;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    div:first-child {
      border-top: none;
    }
    .ivu-badge {
      position: absolute;
      margin-left: 132px;
    }
  }
}
</style>